<template>
  <div :class="{ rankingnav: navFixed }">
    <div class="rankingnav-box">
      <div class="rankingnav-blue" :style="{ top: tops + 'rem' }"></div>
      <div
        class="rankingnav-item"
        v-for="(item, index) in rankingItem"
        :key="index"
        @mouseenter="changtop(index)"
        @mouseleave="changleave()"
      >
        <div>
          <img :src="item.img" alt="" />
        </div>
        <div :class="{ rankingactive: item.indexs === index }">
          {{ item.name }}
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: "RankingNavi",
  data() {
    return {
      rankingItem: [
        {
          img: "http://juntower.top/redu.svg",
          url: "/rankingpage",
          name: "热度榜",
          indexs: 1,
        },
        {
          img: "http://juntower.top/miantiao.svg",
          url: "/rankingchinese",
          name: "中式榜",
          indexs: 2,
        },
        {
          img: "http://juntower.top/kaoya.svg",
          url: "/rankingtradition",
          name: "传统榜",
          indexs: 3,
        },
        {
          img: "http://juntower.top/hanbao.svg",
          url: "/rankingamerican",
          name: "美式榜",
          indexs: 4,
        },
        {
          img: "http://juntower.top/tianping.svg",
          url: "/rankingdesserts",
          name: "甜品榜",
          indexs: 5,
        },
      ],
      foodList: "",
      tops: 0.07,
      stops: 0.07,
      navFixed: false,
    };
  },
  mounted() {
    // 监听滚动条是否滚动到某地
    window.addEventListener("scroll", this.scrollNav);
  },
  methods: {
    changtop(index) {
      this.tops += index * 0.53;
    },

    changleave() {
      this.tops = 0.07;
    },

    scrollNav() {
      let top = document.documentElement.scrollTop;
      if (top > 150) {
        // 当页面滚动到高度250px处，动态绑定class 来设置头部固定定位
        this.navFixed = true;
      } else {
        this.navFixed = false;
      }
    },
  },
};
</script>

<style>
</style>